<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: tableHead(~{::title},~{::link},~{::style})">
    <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-language" content="zh-CN" />-->
    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- select2样式 -->
    <link th:href="@{/static/admin/assets/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <!-- 用户接种疫苗界面自定义css -->
    <link th:href="@{/static/admin/vaccination/css/vaccination-add.css}" rel="stylesheet"/>
    <style type="text/css">
        .draggable {
            cursor: move
        }
    </style>
    <!--<script src="../../../static/js/jquery-2.2.3.min.js"></script>-->
</head>

<body>

<div class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="nest" id="elementClose">
                <div class="">
                </div>
                <div class="body-nest" id="element">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗用户身份证号：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="vaccinationUserIdNumber"
                                           name="vaccinationUserIdNumber"/>
                                </div>
                                <span id="info"></span>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗用户名昵称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" readonly="readonly"
                                           id="vaccinationUserNickname"
                                           name="vaccinationUserNickname"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗用户id：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" readonly="readonly" id="vaccinationUserId"
                                           name="vaccinationUserId"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗名称：</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="vaccinationName" name="vaccinationName">
                                        <option th:each="list : ${vaccineList}" th:if="${list.isOverdue == 1}" th:text="${list.vaccineName}">First
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label ">接种疫苗时间：</label>
                                <div class="col-sm-8">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control" id="vaccinationDate"
                                               name="vaccinationDate"/>
                                        <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗次数：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="vaccinationAmount"
                                           name="vaccinationAmount"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗部位：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="vaccinationPlace"
                                           name="vaccinationPlace"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">接种疫苗医院：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="vaccinationHospital"
                                           name="vaccinationHospital"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-control-static col-sm-offset-9">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>

<!-- jquery-validate 表单验证插件 -->
<script type="text/javascript" th:src="@{/static/admin/assets/js/validate/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/assets/js/validate/messages_zh.min.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/assets/js/validate/jquery.validate.extend.js}"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<!--jquery-->
<!--<script th:src="@{/static/js/jquery-1.7.2.js}"></script>-->
<!-- 自定义vaccination js -->
<script th:src="@{/static/admin/vaccination/js/vaccination-add.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/select2/js/select2.full.min.js}" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        //时间控件
        $("#datetimepicker1").datetimepicker({
            format: "yyyy-mm-dd",
            /*禁用以前的日期，只能选择当今或者未来日期*/
            //startDate: new Date(),
            autoclose: true,
            todayBtn: true,
            language: 'zh-CN',
            initialDate: new Date(),
            minView: 1
        });
    })

    //接种疫苗名称查询 下拉列表
    $(function () {
        $("#vaccinationName").select2({
            placeholder: "请选择"
        }).on("change", function (e) {
        })
        if ($("#vaccinationName option").size() <= 1) {
        }
    })
</script>

<script>
    /**
     * 通过用户身份证号校验用户是否存在
     */
    $(function () {
        //为输入框绑定事件
        $("#vaccinationUserIdNumber").blur(function () {
            //失去焦点获得输入框的内容
            var vaccinationUserIdNumber = $("#vaccinationUserIdNumber").val();
            //去服务端校验
            //alert(vaccinationUserIdNumber);
            $.ajax({
                url: rootPath + "/UserVaccinationController/checkVaccinationUserIdNumber",
                type: "POST",
                dataType: "json",
                async: "true",
                data: {
                    vaccinationUserIdNumber: vaccinationUserIdNumber
                },
                success: function (data) {
                        //console.log(data);
                        console.log(data.list[0].nickname);
                        console.log(data.list[0].id);
                        $("#vaccinationUserNickname").val(data.list[0].nickname);
                        $("#vaccinationUserId").val(data.list[0].id);
                },
                error: function (request) {
                   $.modal.alertError("用户不存在，请检查身份证的准确性！");
                    $("#vaccinationUserNickname").val("");
                    $("#vaccinationUserId").val("");
                }
            })
        })
    })
</script>
</body>
</html>
